<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>数据库网关TeleDB-GW</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          数据库网关DB GW (Database
          Gateway)是一种支持私网数据库远程访问的数据库连接服务。通过数据
          库网关，您可以安全且低成本地将第三方云或本地的数据库接入至天翼云。同时，数据库网关可以与其他天翼云产品(例如数据传输服务DTS、数据库备份DBS、数据管理DMS)集成使用。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.title"
            :name="item.num"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <div class="list-box">
              <div class="title">
                <span>{{ index + 1 }}</span> {{ item.name }}
              </div>
              <div class="mb-20">{{ item.label }}</div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="section-title mt-20">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav14',
  data () {
    return {
      activeName: '0',
      list: [
        {
          name: '安全',
          label:
            '无需数据库开放公网端口，在各层网络访问时均有账号权限认证 在数据传输链路上，通过HTTPS实现天然非对称加密。'
        },
        {
          name: '易用',
          label:
            '无需大量的网络配置和路由配置，仅需要天翼云AK (Access Key)就可以在几分钟内接入天翼云。'
        },
        {
          name: '低成本',
          label:
            '提供免费的数据库接入服务。无需单独购买ECS、VPC网络、高速通道，本地网关代理可在任意有空余内存的机器上运行 在网络传输方面，公网传输阶段采用压缩传输，进一步降低网络成本。'
        },
        {
          name: '高可用',
          label:
            '本地保证单机容灾，可部署多节点确保跨机器或跨机房容灾 云端自动完成跨机房容灾，链路断开秒级恢复。'
        },
        {
          name: '全生态服务',
          label:
            '通过数据库网关，各种数据库产品将逐步接入，实现跨云和云上云下的全生态服务(如数据库迁移、容 灾、跨库JOIN、数据分析、数据安全等能力)。'
        }
      ],
      tabList: [
        {
          title: '场景1',
          num: '0',
          name: '多云数据库统一管理场景',
          label:
            '数据库网关与数据管理DMS搭配可为您提供高稳定性、低成本、统一的非天翼云数据库（例如本地IDC 自建、其他友商云的云数据库、其他友商云服务器上自建的数据库）的通用管理方案，实现多云统一的 数据库管理服务。'
        },
        {
          title: '场景2',
          num: '1',
          name: '本地IDC/跨云数据库上云迁移场景',
          label:
            '通过数据库网关，可将本地或第三方云的数据库低成本地接入至天翼云。完成接入后，通过数据传输 服务DTS,在数据迁移、数据同步或数据订阅时，可以直接将数据库网关中接入的数据库作为源库或目 标库。'
        },
        {
          title: '场景3',
          num: '2',
          name: '云上云下数据库同步场景',
          label:
            '通过数据传输服务DTS的数据同步功能，可以使本地IDC或其他云厂商的数据库与天翼云数据库内容 进行同步。'
        },
        {
          title: '场景4',
          num: '3',
          name: '本地IDC/跨云数据库备份上云场景',
          label:
            '数据库备份DBS支持通过数据库网关备份本地或第三方云的私网数据库到云存储，可将数据库低成本 地接入至天翼云。完成接入后，可以直接将数据库网关中接入的数据库作为源库。'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-14.png')
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
